<template>
  <div class="confirm-file__list">
    <div class="confirm-file__item" v-for="(item, index) in fileList" :key="item.fileId">
      <div class="item-file">
        <img :src="fileIcon(item).value as any" />
        <span class="file-name" v-ellipsis="{ rows: 1, text: item.fileName }"></span>
      </div>
      <div class="item-icon">
        <div class="item-icon__down" v-if="!isOptions" @click="handelDownload(item)">下载</div>
        <GiSvgIcon v-else name="file-list-del" size="24" @click="handelRomeFile(index)"></GiSvgIcon>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import useComputedParams from "@/hooks/useComputedParams";
import messageFileIcon from "@/assets/images/message-file.png";

const props = defineProps({
  modelValue: {
    type: Array,
    default: () => []
  },
  isOptions: {
    type: Boolean,
    default: true
  }
});
const emit = defineEmits(["update:modelValue"]);
const fileList = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});

/**
 * 判断是否是图片
 * @param filename
 */
const isImageByExtension = (filename: string): boolean => {
  const imageExtensions: string[] = ["jpg", "png", "jpeg"];
  const ext: string | undefined = filename?.split(".")?.pop()?.toLowerCase();
  return ext ? imageExtensions.includes(ext) : false;
};
const fileIcon = useComputedParams(data => {
  return isImageByExtension(data.url) ? data.url : messageFileIcon;
});

const handelDownload = (item: any) => {
  window.open(item.url);
};

const handelRomeFile = (index: number) => {
  fileList.value.splice(index, 1);
};
</script>

<style scoped lang="scss">
@import "messageFileList";
</style>
